<template>
    <div class="svgBox" id="svgBox" ref="svgBox">
        <div style="height:60px">
            <ul class="scale-box" v-show="operateForm.legend">
                <li v-for="(item,index) in lineTypeList" :key="index" @click="hanldeChangeScaleShow(item)">
                <div :style="item.show ? `backgroundColor:${item.color}` : 'backgroundColor:#999'" class="line"></div>
                <div class="name" :style="item.show ? '' : 'color:#999'">{{ item.label }}</div>
                </li>
            </ul>
        </div>
        <div :style="`position:relative`" style="height: calc(100vh - 370px);">
        <svg :width="`${svgW}px`" :height="`100%`" :viewBox="`0 0 ${svgW} 100%`"  id="svg">
            <g>
            <!-- 绘制背景图 -->
            <defs>
                <pattern id="img1" patternUnits="userSpaceOnUse" :width="`${svgW}px`" :height="`${svgH}px`">
                <image :href="bwtImg" x="0" y="0" :width="`${svgW}px`" :height="`${svgH}px`" :opacity="trsp/100"/>
                </pattern> 
            </defs>
            <rect x="0" y="0" :width="svgW" :height="svgH" stroke="black" fill="url(#img1)" stroke-width="0"/>
            <g v-for="(item,index) in pointAndLine" :key="index">
                <!-- 绘制测点 -->
                <circle :cx="item.startX" :cy="item.startY" :r="item.pointSize" :fill="item.color" v-if="item.lineType == 1 && item.show" @click="handleClickPoint(item)"/>
                <!-- 绘制线 -->
                <line :x1="item.startX" :y1="item.startY" :x2="item.endX" :y2="item.endY" :stroke="item.color" :stroke-width="item.borderSize" v-if="item.lineType > 1 && item.lineType < 6 && item.show" @mouseover="svgMouseMove(item,$event)" @mouseleave="svgMouseLeave" @click="handleClickPoint(item)"/>
                <!-- 绘制带箭头的线 -->
                <defs>
                <marker id="triangle" markerUnits="strokeWidth" markerWidth="5" markerHeight="4" refX="0" refY="2" orient="auto" >
                    <path d="M 0 0 L 5 2 L 0 4 z" :style="`fill:${item.color}`"/>
                </marker>
                </defs>
                <path :d="`M ${item.startX},${item.startY} L ${item.endX},${item.endY}`" :stroke="item.color" :stroke-width="item.borderSize" fill="none"
                style="marker-end: url(#triangle);" v-if="(item.lineType == 6 || item.lineType == 7) && item.show" @click="handleClickPoint(item)"/>
            </g>
            <g v-for="(item,index) in textList" :key="index">
                <!-- 绘制文字 -->
                <text :x="item.x" :y="item.y" fill="#000">{{item.text}}</text>
            </g>
            <g v-if="operateForm.measured">
                <g v-for="(item,index) in pointLineTips" :key="index">
                <text 
                v-for="(p,pi) in item.vLs" :key="pi"
                :x="item.x + 2" :y="item.y + pointTipsSet.fontSize * pi" text-anchor="start" :font-size="pointTipsSet.fontSize" :fill="pointTipsSet.fontColor" :font-family="pointTipsSet.fontFamily" @click="handleClickPoint(item)"  :font-weight="pointTipsSet.bold == 1 ? 'bold' : ''"
                >{{ p }}</text> 
                </g>
            </g>
            </g>
        </svg>
        <div class="pointTool" :style="`left:${positonX}px;top:${positonY}px;`" v-show="pointToolShow && vl">
            <p v-for="(item,index) in vl" :key="index">{{ item }}</p>
        </div>
        </div>
    </div> 
</template>

<script>
export default ({
    props:{
        operateForm:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        lineTypeList:{
            type:Array,
            default:()=>{
                return []
            }
        }
    },
    data() {
        return{

        }
    },
})
</script>
